<template>
  <div class="app-container">
      <avue-crud
        :data="data"
        :option="option"
        v-model="addObj"
        :page="page"
        @search-change="searchChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-save="submit"
        @row-del="del"
        @row-update="edit"
        :before-close="beforeClose"
      >

        <template slot-scope="scope" slot="menu">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-delete"
            @click.native="delRow(scope)"
          >删除</el-button>
<!--          <el-button-->
<!--            type="text"-->
<!--            size="mini"-->
<!--            icon="el-icon-setting"-->
<!--            @click.native="allocatePower(scope)"-->
<!--          >分配权限</el-button>-->
        </template>

      </avue-crud>
  </div>
</template>

<script>
  import axios from 'axios'
  import {getList,addUser,deleteUser,updateUser} from '@/api/userManagement'
    export default {
        name: "roleManagement",
        watch:{
            data() {
                // 对 Table 进行重新布局
                this.$nextTick(()=>{
                    this.$refs.crud.$refs.table.doLayout()
                })
            },
        },
        data() {
            let validateLoginName=(rule, value, callback)=>{
                let reg=/^[a-zA-Z]\w{5,9}$/
                if (!reg.test(value)) {
                    callback(new Error('用户名以字母开头，至少6位，至多10位'));
                } else {
                    callback();
                }
            };
            let validatePassWord=(rule, value, callback)=>{
                let reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/
                if (!reg.test(value)) {
                    callback(new Error('密码由数字和字母组成，至少6位，至多10位'));
                } else {
                    callback();
                }
            };
            return {
                addObj: {
                    attachs: [
                        {
                            fileName: "萨达",
                            time: "奥术大师"
                        }
                    ]
                },
                data: [],
                originPage:{
                    pageSize: 10,
                    currentPage: 1,
                    total: 10,
                },
                page: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 10,
                    layout: "total,pager,prev, next",
                },

                option: {
                    labelPosition:"left",
                    dialogEscape: false,
                    dialogClickModal: false,
                    dialogWidth: 1400,
                    height: "auto",
                    calcHeight: 100,
                    searchShow: true,
                    // excelBtn:true,
                    index: true,
                    indexLabel: "序号",
                    searchMenuSpan:6,
                    indexWidth: 100,
                    menuWidth: 300,
                    refreshBtn: false,
                    searchBtn: true,
                    columnBtn: false,
                    addBtn: true,
                    menu: true,
                    delBtn: false,
                    editBtn: true,
                    editBtnText: "修改",
                    align: "center",
                    addTitle: "录入新用户",
                    column: [
                        {
                            label: "用户名",
                            prop: "loginName",
                            search:true,
                            rules: [
                                { validator: validateLoginName, trigger: 'blur' }
                            ],
                        },
                        {
                            label: "登录密码",
                            prop: "password",
                            rules: [
                                { validator: validatePassWord, trigger: 'blur' }
                            ],
                        },
                        {
                            label: "真实姓名",
                            prop: "username",
                            search:true,
                        },
                        {
                            label: "电话号码",
                            prop: "phoneNumber",
                        },
                        {
                            label: "邮箱",
                            prop: "email",
                        },
                        {
                            label: "性别",
                            prop: "sex",
                            type:"select",
                            search:true,
                            dicData:[{
                                label:"男",
                                value:0,
                            },{
                                label:"女",
                                value:1,
                            },]
                        },
                        {
                            label: "角色名",
                            prop: "userjob",
                            type:"select",

                        },
                    ]
                },

            };
        },
        computed: {

        },
        methods: {

            initData() {
                this.page.pageNum=this.page.currentPage
                getList(this.page).then(res=>{
                    console.log(res)
                    this.data = res.data.resultList;
                    this.page.total = res.data.total;
                })
            },


            searchChange(params, done) {
                this.page=this.originPage
                this.query=params
                this.page={...this.page,...params}
                console.log(this.page)
                this.initData();
                done()
            },

            sizeChange(val) {
                this.page.currentPage = 1;
                this.page.pageSize = val;
                this.initData();
            },

            currentChange(val) {
                this.page.currentPage = val;
                this.initData();
            },

            handleAdd() {
                this.$refs.crud.rowAdd();
            },
            submit(form, done) {
                console.log("addform");
                console.log(form);
                addUser(form).then(res=>{
                    console.log(res);
                    this.$message.success("新增用户成功")
                    this.initData();
                })
                done();
            },


            edit(row, index, done, loading) {
                console.log("editform");
                console.log(row);
                updateUser(row).then(res=>{
                    console.log(res);
                    this.$message.success("修改用户信息成功")
                    this.initData();
                })
                done()
            },

            change(data) {
                this.$refs.crud.rowEdit(res.data.data);
            },
            delRow(scope){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteUser(scope.row.id).then(res=>{
                        this.initData();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            resetPassword(row){
                console.log(row)
            },


            beforeClose(done) {
                done()
            },

        },
        mounted() {
             this.initData()

        },


        created() {

        },

    };
</script>

<style lang="scss">

</style>
